<template>
	<div class="container">
		<div class="header">
			<router-link to="">
				<i class="iconfont icon-back" @click="$router.back()"></i>
			</router-link>
			<p>收货地址</p>
		</div>
		<div class="content">
			<ul>
				<li v-for="item in list" :key="item.id" :class="{ default: item.isDefault === 1 }">
					<p class="address-one">
						<span>{{ item.receiveName }}</span>
						<span>{{ item.receivePhone }}</span>
					</p>
					<p class="title">
						{{ item.receiveRegion }}-{{ item.receiveDetail }}
					</p>
					<br>
					<button><i class="iconfont icon-remove" @click="remove(item.id)"></i></button>
					<button><i class="iconfont icon-edit"></i></button>
					<span class="box" v-if="item.isDefault === 1">默认地址</span>
					<button v-else @click="setDefault(item.id)">设为默认</button>
				</li>
			</ul>
			<button>新增地址</button>
		</div>
	</div>
</template>

<script>
import { AddressApi } from "@/api";

export default {
	name: "Address",
	data() {
		return {
			list: []
		}
	},
	methods: {
		setDefault(id) {
			this.$request({
				url: "/address/set_default/" + id,
			})
				.then(() => {

					this.list.forEach(item => item.isDefault = item.id === id ? 1 : 0)
					this.$miNotice("默认地址设置成功")
				})
				.catch(() => {
				})
		},
		remove(id) {

			this.$miConfirm('真删?')
				.then(() => {
					return this.$request({
						url: "/address/remove/" + id,
					})
				})

				.then(() => {
					this.list.splice(this.list.findIndex(item => item.id === id), 1)

					this.$miNotice('地址删除成功..')
				})
				.catch(() => {
				})


		}
	},
	created() {
		AddressApi.getList()
			.then(list => {
				this.list = list;
			})
			.catch(() => {

			})
	},
}
</script>

<style scoped>
.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #fff;
}

.header {
	flex-shrink: 0;
	height: 45px;
	display: flex;
	align-items: center;
}

.header p {
	font-size: 18px;
	margin-left: 146px;
	color: rgba(0, 0, 0, 0.8);
}

.content ul li {
	padding: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.address-one {
	display: flex;
	justify-content: space-between;
}

.box {
	font-size: 12px;
	padding: 2px;
	color: #b60909;
	border: 1px solid #b60909;
}

.title {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.4);
	margin-top: 10px;
	margin-left: 10px;
}
</style>